<template>
  <div class="app-container home">
    <Navbar class="navBar" />
    <div id="container" ref="map" />
    <div class="left-dialog">
      <el-card class="box-card archivesList">
        <!-- <div class="search-box">
          <el-input
            v-model="archivesSearch"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
          />
        </div> -->
        <div class="body">
          <div v-if="archivesList.length" class="list">
            <div
              v-for="(item, index) in archivesList"
              :key="index"
              class="item"
              :class="{ active: currentIndex == index }"
              @click="selectArchiveItem(item, index)"
            >
              <div class="wrap">
                <i class="iconfont el-icon-document" />
                <avue-text-ellipsis
                  :key="item.name"
                  :text="item.name"
                  :height="30"
                  :width="200"
                  use-tooltip
                  placement="top"
                >
                  <small slot="more">...</small>
                </avue-text-ellipsis>
                <!-- {{ item.name }} -->
              </div>
            </div>
          </div>
          <div v-else>
            <el-empty description="暂无数据" />
          </div>
        </div>
      </el-card>
      <el-card class="box-card total-org chartsBg">
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div ref="totalByOrg" style="height: 240px" />
        </div>
      </el-card>
      <el-card class="box-card total-reason chartsBg">
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div ref="totalByReason" style="height: 240px" />
        </div>
      </el-card>
    </div>
    <div class="right-dialog">
      <el-card class="box-card archivesInfo chartsBg">
        <!-- <div class="search-box">
          <el-input
            v-model="archivesSearch"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
          />
        </div> -->
        <div class="body">
          <div class="label">档案编号</div>
          <div class="value">{{ currentItem.archivesId }}</div>
          <div class="label">起火对象</div>
          <div class="value">{{ currentItem.fireName }}</div>
          <div class="label">起火地址</div>
          <div class="value">{{ formatAddress(currentItem.fireAddress) }}</div>
          <div class="label">起火天气</div>
          <div class="value">{{ currentItem.weather }}</div>
          <div class="label">报警时间</div>
          <div class="value">{{ currentItem.callTime }}</div>
          <div class="label">出警时间</div>
          <div class="value">{{ currentItem.goTime }}</div>
          <div class="label">承办单位</div>
          <div class="value">{{ currentItem.doOrg }}</div>
          <div class="label">承办人员</div>
          <div class="value">
            {{ currentItem.doPerson }},{{ currentItem.doOtherPerson || "" }}
          </div>
          <div class="label">出警车辆</div>
          <div class="value">{{ currentItem.doCars }}</div>
          <div class="label">出警人数</div>
          <div class="value">{{ currentItem.doPersonCount }}</div>
          <div class="label">案件状态</div>
          <div class="value">{{ currentItem.state ? "已归档" : "调查中" }}</div>
          <div class="label">程序类型</div>
          <div class="value">
            {{ currentItem.archivesType == "0" ? "简易程序" : "一般程序" }}
          </div>
          <div class="label">简单描述</div>
          <div class="value">{{ currentItem.remark || "--" }}</div>
        </div>
      </el-card>
      <el-card class="box-card total-scale chartsBg">
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div ref="totalByScale" style="height: 240px" />
        </div>
      </el-card>
      <el-card class="box-card total-year chartsBg">
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <div ref="totalByYear" style="height: 240px" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import Navbar from '@/layout/components/Navbar'
import { list } from '@/api/archives/archives'
import * as APi_Dashborard from '@/api/tool/dashborard'
import echarts from 'echarts'
export default {
  name: 'Index',
  components: {
    Navbar
  },
  data() {
    return {
      // 版本号
      version: '3.8.0',
      map: null,
      AMap: null,
      archivesList: [{}],
      archivesSearch: '',
      currentIndex: null,
      currentItem: {},
      totalByOrg: null,
      totalByReason: null,
      totalByScale: null,
      totalByYear: null
    }
  },
  computed: {
    formatAddress() {
      return (address) => {
        if (!address) return '--'
        return address.split(',')[2]
      }
    }
  },
  created() {},
  mounted() {
    AMapLoader.reset()
    // DOM初始化完成进行地图初始化
    this.initMap()
    // this.getArchivesList()
    this.$nextTick(() => {
      this.getTotal()
    })
  },
  methods: {
    getTotal() {
      this.getByOrg()
      this.getByReason()
      this.getByScale()
      this.getByYear()
    },
    getByOrg() {
      APi_Dashborard.getTotalByOrg().then((res) => {
        if (res.code == 200) {
          // console.log(res.data)
          const label = res.data.map((item) => {
            return item.dict_label
          })
          const count = res.data.map((item) => {
            return item.count
          })

          this.totalByOrg = echarts.init(this.$refs.totalByOrg, 'dark')

          this.totalByOrg.setOption({
            backgroundColor: '',
            xAxis: {
              type: 'category',
              data: label
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: count,
                type: 'line'
              }
            ]
          })
        }
      })
    },
    getByReason() {
      APi_Dashborard.getTotalByReason().then((res) => {
        if (res.code == 200) {
          // console.log(res)
          const label = res.data.map((item) => {
            return item.dict_label
          })
          const count = res.data.map((item) => {
            return item.count
          })
          this.totalByReason = echarts.init(this.$refs.totalByReason, 'dark')
          this.totalByReason.setOption({
            backgroundColor: '',
            xAxis: {
              type: 'category',
              data: label
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: count,
                type: 'line'
              }
            ]
          })
        }
      })
    },
    getByScale() {
      APi_Dashborard.getTotalByScale().then((res) => {
        if (res.code == 200) {
          // console.log(res)
          const label = res.data.map((item) => {
            return item.dict_label
          })
          const count = res.data.map((item) => {
            return item.count
          })
          this.totalByScale = echarts.init(this.$refs.totalByScale, 'dark')
          this.totalByScale.setOption({
            backgroundColor: '',
            xAxis: {
              type: 'category',
              data: label
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: count,
                type: 'line'
              }
            ]
          })
        }
      })
    },
    getByYear() {
      APi_Dashborard.getTotalByYear({ year: 2022 }).then((res) => {
        if (res.code == 200) {
          console.log(res)
          const label = res.data.map((item) => {
            return item.time
          })
          const count = res.data.map((item) => {
            return item.count
          })
          this.totalByYear = echarts.init(this.$refs.totalByYear, 'dark')
          this.totalByYear.setOption({
            backgroundColor: '',
            xAxis: {
              type: 'category',
              data: label
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: count,
                type: 'line'
              }
            ]
          })
        }
      })
    },
    initMap() {
      AMapLoader.load({
        key: 'ab23c3d3e86a5a8a34122cecbd942d26', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['Geolocation'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // console.log(this.$refs.map)
          this.getArchivesList()
          // this.map.plugin('AMap.Geolocation', function() {
          //   var geolocation = new AMap.Geolocation({
          //     // 是否使用高精度定位，默认：true
          //     enableHighAccuracy: true,
          //     // 设置定位超时时间，默认：无穷大
          //     timeout: 20000,
          //     // 定位按钮的停靠位置的偏移量
          //     offset: [10, 20],
          //     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          //     zoomToAccuracy: true,
          //     //  定位按钮的排放位置,  RB表示右下
          //     position: 'RB'
          //   })

          //   geolocation.getCurrentPosition(function(status, result) {
          //     console.log(status + ':', result)
          //     if (status == 'complete') {
          //       onComplete(result)
          //     } else {
          //       onError(result)
          //     }
          //   })

          //   function onComplete(data) {
          //     // data是具体的定位信息
          //     console.log(data.position)
          //   }

          //   function onError(data) {
          //     // 定位出错
          //   }
          // })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    getArchivesList() {
      list({ pageNum: 1, pageSize: 10 }).then((res) => {
        if (res.code == 200) {
          this.archivesList = res.rows

          this.currentIndex = 0
          this.currentItem = res.rows[0]
          const { fireAddress, name } = res.rows[0]
          const addressArr = fireAddress.split(',')
          // 存储AMap
          this.map = new window.AMap.Map('container', {
            // 设置地图容器id
            resizeEnable: true,
            rotateEnable: true,
            pitchEnable: true,
            zoom: 17,
            pitch: 50,
            rotation: 5,
            // viewMode: '3D', // 开启3D视图,默认为关闭
            buildingAnimation: true, // 楼块出现是否带动画
            mapStyle: 'amap://styles/df9f09c262d08c24097b63ec6059238d',
            expandZoomRange: false,
            zooms: [2, 20],
            center: [addressArr[0], addressArr[1]]
          })
          res.rows.forEach((item) => {
            const { fireAddress, name } = item
            const addressArr = fireAddress.split(',')
            var marker = new window.AMap.Marker({
              position: [addressArr[0], addressArr[1]], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: name
            })
            marker.on('mouseover', () => {
              marker.setLabel({
                direction: 'top',
                offset: new window.AMap.Pixel(0, 0), // 设置文本标注偏移量
                content: `<div class='info'>${name}</div>` // 设置文本标注内容
              })
            })
            marker.on('mouseout', () => {
              marker.setLabel({ content: '' })
            })
            this.map.add(marker)
          })
          this.setCenter(addressArr, name)
        }
      })
    },
    selectArchiveItem(item, index) {
      this.currentIndex = index
      this.currentItem = item
      const { fireAddress, name } = item
      const addressArr = fireAddress.split(',')
      this.setCenter(addressArr, name)
    },
    setCenter(location, name) {
      // 将地图 平滑移动到新的中心点
      this.map.setCenter([location[0], location[1]])
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  position: relative;
  padding: 0;
  .navBar {
    width: 100%;
    z-index: 999;
    position: fixed;
    top: 0;
    background: #fff0;
    color: #fff;
  }
}
.home {
  position: relative;
  .left-dialog,
  .right-dialog {
    position: absolute;
    top: 70px;
    .box-card {
      height: 250px;
      overflow-y: auto;
      background-color: #ffffff00;
      border: 3px solid #3c669a;
    }
  }
  .left-dialog {
    left: 10px;
    .box-card {
      width: 300px;
      .search-box {
        margin-bottom: 20px;
      }
      .body {
        .list {
          .item {
            cursor: pointer;
            padding: 10px;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            font-size: 14px;
            margin-bottom: 10px;
            color: #3196fa;
            background-color: #fff;
            &.active {
              background-color: #3196fa;
              color: #fff;
              .iconfont {
                color: #fff;
              }
            }
            .iconfont {
              color: #3196fa;
              margin-right: 10px;
            }
            .wrap {
              display: flex;
              align-items: center;
              // overflow: hidden; //超出的文本隐藏
              // text-overflow: ellipsis; //溢出用省略号显示
              // white-space: nowrap; //溢出不换行
            }
            &:hover {
            }
          }
        }
      }
    }
    .total-org,
    .total-reason {
      margin-top: 50px;
      width: 500px;
      height: 300px;
    }
  }
  .right-dialog {
    right: 5px;
    .box-card {
      width: 260px;

      .body {
        font-size: 14px;

        .label {
          color: #d1cdcd;
          font-weight: bold;
          margin-bottom: 6px;
        }

        .value {
          color: #999;
          margin-bottom: 8px;
        }
      }
    }
    .total-scale,
    .total-year {
      margin-top: 50px;
      width: 500px;
      height: 300px;
    }
  }
}
#container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
}
.chartsBg {
  background-image: url("../assets/下载.png");
}
.archivesInfo {
  width: 100%;
  // float: right;
  &::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
  }
}
</style>
